<template>
  <section class="new-join">
    <DivShell title="最新入驻">
      <div class="container">
        <Scroll  v-if="listData.length>=3" :data="listData" :class-option="optionSingleHeight">
          <ul>
            <li v-for="(item,index) in listData" :key="index">
              <h3>
                <p>{{item.name}}</p>
                <span>{{item.entryDate}}</span>
              </h3>
              <p>{{item.standardAddress}}</p>
            </li>
          </ul>
        </Scroll>
      </div>
    </DivShell>
  </section>
</template>

<script>
import { mapGetters } from 'vuex'
import DivShell from '@src/components/divShell.vue'
import Scroll from 'vue-seamless-scroll'
const echarts = require('echarts');
export default {
  name: "NewJoin",
  components:{
    DivShell,
    Scroll
  },
  props: {
    title:{
      type: String,
      default:'丰图精准决策数字底板'
    }
  },
  data() {
    return {
      barChartObj:null,
      listData:[]
    };
  },
  computed: {
    ...mapGetters(['reBuildData']),
    optionSingleHeight () {
        return {
          singleHeight: 61,
          limitMoveNum: this.listData.length,
          waitTime: 1500
        }
    }
  },
  watch:{
    reBuildData: {
      handler(cval, oval) {
        this.listData=this.reBuildData.entryCompanies;
      },
      deep: true
    }
  },
  created(){
    this.listData=this.reBuildData.entryCompanies;
  },
  mounted() {
    
  },
  methods: {
    
  },
  beforeDestroy() {
      
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .new-join{
    margin-bottom: 18px;
    & .container{
      margin-top: -17px;
      width: 100%;
      height: 183px;
      overflow: hidden;
      & ul{
        width: 100%;
        & li{
          padding-top: 8px;
          padding-bottom: 6px;
          box-sizing: border-box;
          // background: url('../../../assets/img/new-business-icon.png') 8px 12px no-repeat;
          margin-left: 30px;
          border-bottom: 1px dashed #47506E;
          &>h3{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 6px;
            position: relative;
            &::after{
              content: '';
              position: absolute;
              width: 15px;
              height: 15px;
              top: 4px;
              left: -25px;
              background: url('../../../assets/img/new-business-icon.png');
            }
            &>p{
              font-size: 16px;
              color: #B3BBD4;
            }
            &>span{
              font-size: 14px;
              color: #616B8A;
            }
          }
          &>p{
            font-size: 14px;
            color: #959DB4; 
          }
        }
      }
    }
  }
</style>
